<template>
  <div
    class="E-page-songs"
    v-loading="load"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
  >
    <el-table :data="dataArr" border stripe>
      <el-table-column type="index" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" min-width="180" label="音乐标题" show-overflow-tooltip>
        <template slot-scope="scope">
          <span style="margin-right:5px;">{{scope.row.name}}</span>
          <el-tag v-if="scope.row.alias[0]" type="info" effect="plain">{{ scope.row.alias[0] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="artists"
        class-name="table-column-tags"
        min-width="140"
        label="歌手"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-popover
            v-for="(item, index) in scope.row.artists"
            :key="index"
            trigger="hover"
            placement="top"
            :open-delay="1000"
            popper-class="el-popover-narrow"
            v-model="item.__show_popover"
          >
            <!-- el-popover 组件不支持懒加载，通过自定义属性(__show_popover)巧妙的实现了 -->
            <E-popover-singer v-if="item.__show_popover" :id="item.id" />
            <el-tag slot="reference" type="info">{{ item.name }}</el-tag>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="album.name" min-width="160" label="专辑" show-overflow-tooltip></el-table-column>
      <el-table-column
        :formatter="durationFormatter"
        prop="duration"
        width="70"
        align="center"
        label="时长"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        width="80"
        label="操作"
        align="center"
        show-overflow-tooltip
        :key="Math.random()"
      >
        <template slot-scope="scope">
          <i class="fa fa-heart-o" />
          <!-- <i class="fa fa-heart" /> -->
          <i @click.prevent="download(scope.$index, dataArr)" class="fa fa-download" />
          <i class="fa fa-plus-square" />
        </template>
      </el-table-column>
    </el-table>
    <E-pagination @change="(p,l)=>getData(keywords,p,l)" :total="total" background />
  </div>
</template>

<script>
import Tool from '@/plug-in/Tool';

export default {
  props: ['keywords'],
  components: {
    'E-pagination': () => import('@/components/high-reuse/E-pagination'),
    'E-popover-singer': () => import('@/components/high-reuse/E-popover-singer')
  },
  data() {
    return {
      load: false,
      total: 0,
      dataArr: []
    };
  },
  methods: {
    getData(keywords, offset, limit) {
      this.load = true;
      this.$api.get('search', {
        keywords, offset, limit, type: 1
      }, true).then(({ result }) => {
        this.total = result.songCount;
        this.dataArr = result.songs;
        console.log(result);
      }).finally(() => { this.load = false; });
    },
    download(index, dataArr) {},
    durationFormatter(row, column) {
      const total = row.duration / 1000;
      return Tool.durationFormat(total);
    }
  }
};
</script>

<style lang="scss">
.E-page-songs {
  & > .el-table {
    .el-table__body-wrapper {
      .el-table__row {
        .el-tooltip > i {
          margin-right: 5px;
          color: #777;
          cursor: pointer;
          &:last-of-type {
            margin-right: 0;
          }
          &:hover {
            color: #000;
          }
          &.fa-heart {
            color: rgb(205, 41, 41);
            .el-popover__reference {
              display: inline-block;
            }
          }
        }
        .table-column-tags {
          & > .el-tooltip > span {
            margin-right: 5px;
            &:last-of-type {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
